﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- Latest Bootstrap min CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
    <!-- Dropdownhover CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap-dropdownhover.min.css" type="text/css">
    <!-- latest fonts awesome -->
    <link rel="stylesheet" href="assets/font/css/font-awesome.min.css" type="text/css">
    <!-- simple line fonts awesome -->
    <link rel="stylesheet" href="assets/simple-line-icon/css/simple-line-icons.css" type="text/css">
    <!-- stroke-gap-icons -->
    <link rel="stylesheet" href="assets/stroke-gap-icons/stroke-gap-icons.css" type="text/css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="assets/css/animate.min.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css" type="text/css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="assets/css/slider.css" type="text/css">
    <!--  baguetteBox -->
    <link rel="stylesheet" href="assets/css/baguetteBox.css">
    <!-- Owl Carousel Assets -->
    <link href="assets/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="assets/owl-carousel/owl.theme.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!-- 导入页眉 -->
<div class="header"></div>
<!-- newsletter -->
<section class="grid-shop">
    <!-- .grid-shop -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Library</li>
                </ol>
            </div>
            <div class="col-sm-3 col-md-3">
                <div class="weight">
                    <div class="title">
                        <h2>Categories</h2>
                    </div>
                    <div class="product-categories">
                        <ul>
                            <li><a href="#">Laptop & Computer <span><i class="fa fa-angle-right" aria-hidden="true"></i></span></a>
                            </li>
                            <li><a href="#">Accessories <span><i class="fa fa-angle-right"
                                                                 aria-hidden="true"></i></span></a></li>
                            <li><a href="#">Gaming <span><i class="fa fa-angle-right" aria-hidden="true"></i></span></a>
                            </li>
                            <li><a href="#">Mac Computers <span><i class="fa fa-angle-right"
                                                                   aria-hidden="true"></i></span></a></li>
                            <li><a href="#">Ultrabooks <span><i class="fa fa-angle-right" aria-hidden="true"></i></span></a>
                            </li>
                            <li><a href="#">Printers & Ink <span><i class="fa fa-angle-right"
                                                                    aria-hidden="true"></i></span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="weight">
                    <div class="title">
                        <h2>filter by price</h2>
                    </div>
                    <div class="filter-outer">
                        <h3>Price</h3>
                        <!-- Bootstrap Pricing Slider by ZsharE -->
                        <div class="button-slider">
                            <div class="btn-group">
                                <div class="btn btn-default">
                                    <p>Range: <strong>$<span id="sliderValue">100.0</span></strong> - <strong>$<span
                                            id="sliderValue2">1.700.00</span></strong></p>
                                    <input id="bootstrap-slider" data-slider-min="1" data-slider-max="1700"
                                           data-slider-step="1" data-slider-value="100" type="text">
                                    <div class="valueLabelblck">Filter</div>
                                </div>
                            </div>
                        </div>
                        <!-- End of Bootstrap Pricing Slider by ZsharE -->
                        <div class="brands">
                            <h3>Brands</h3>
                            <ul>
                                <li><a href="#">Black <span>(10)</span></a></li>
                                <li><a href="#">White <span>(13)</span></a></li>
                                <li><a href="#">Blue <span>(05)</span></a></li>
                                <li><a href="#">Red <span>(87)</span></a></li>
                                <li><a href="#">Screen <span>(40)</span></a></li>
                            </ul>
                        </div>
                        <div class="color">
                            <h3>Color</h3>
                            <ul>
                                <li><a href="#" class="color-1"><span></span></a></li>
                                <li><a href="#" class="color-2"><span></span></a></li>
                                <li><a href="#" class="color-3"><span></span></a></li>
                                <li><a href="#" class="color-4"><span></span></a></li>
                                <li><a href="#" class="color-5"><span></span></a></li>
                                <li><a href="#" class="color-6"><span></span></a></li>
                                <li><a href="#" class="color-7"><span></span></a></li>
                            </ul>
                        </div>
                        <div class="size">
                            <h3>Size</h3>
                            <ul>
                                <li><a href="#">L </a></li>
                                <li><a href="#">M </a></li>
                                <li><a href="#">S </a></li>
                                <li><a href="#">XL</a></li>
                                <li><a href="#">XXL</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="weight">
                    <div class="title">
                        <h2>Compare products</h2>
                    </div>
                    <div class="ads-lft">
                        <p>You have no item to compare. </p> <img src="assets/images/add-banner2.jpg" alt="add banner">
                    </div>
                </div>
                <div class="weight">
                    <div class="title">
                        <h2>BEST PRODUCTS</h2>
                    </div>
                    <div class="toprating-box">
                        <ul>
                            <li>
                                <div class="e-product">
                                    <div class="pro-img"><img src="assets/images/products/digital/5.jpg" alt="2"></div>
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="e-product">
                                    <div class="pro-img"><img src="assets/images/products/digital/9.jpg" alt="2"></div>
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="e-product">
                                    <div class="pro-img"><img src="assets/images/products/digital/12.jpg" alt="2"></div>
                                    <div class="pro-text-outer"><span>Macbook, Laptop</span>
                                        <a href="#">
                                            <h4> Apple Macbook Retina 23’ </h4>
                                        </a>
                                        <p class="wk-price">$290.00 </p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-9 col-md-9">
                <div class="col-md-12 grid-banner"><img src="assets/images/Grid-banner.png" alt="Grid-banner"/></div>
                <div class="grid-spr">
                    <div class="col-sm-6 col-md-6"><a href="#" class="grid-view-icon"><i class="fa fa-th-large"
                                                                                         aria-hidden="true"></i></a> <a
                            href="#" class="list-view-icon"><i class="fa fa-list" aria-hidden="true"></i></a>
                        <div class="select-option">
                            <a class="btn btn-default btn-select options2">
                                <input type="hidden" class="btn-select-input" id="1" name="1" value=""/>
                                <span class="btn-select-value">Select an Item</span>
                                <span class="btn-select-arrow fa fa-angle-down"></span>
                                <ul>
                                    <li class="selected">Default Sorting</li>
                                    <li>Option 1</li>
                                    <li>Option 2</li>
                                    <li>Option 3</li>
                                    <li>Option 4</li>
                                </ul>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6 text-right"><strong>Showing 1-12 <span>of 30 relults</span></strong>
                    </div>
                </div>
                <div id="page">
                    <div class="col-xs-12 col-sm-12 col-md-12" v-for="goods in GoodsList">
                        <!-- .pro-text -->
                        <div class="pro-text">
                            <div class="col-xs-12 col-sm-5 col-md-5">
                                <!-- .pro-img -->
                                <div class="pro-img"><img :src="goods.headUrl" alt="2"
                                                          style="width: 309.79px;height: 309.79px">
                                    <sup class="sale-tag">sale!</sup>
                                    <!-- .hover-icon -->
                                    <div class="hover-icon"><a :href="'http://localhost:8080/view_api/shop-detail.html?id='+goods.id"
                                                               @click="walk(goods.id)">
                                        <span class="icon icon-Search"></span>
                                    </a> </div>
                                    <!--<div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                            href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                            class="icon icon-Restart"></span></a></div>-->
                                    <!-- /.hover-icon -->
                                </div>
                                <!-- /.pro-img -->
                            </div>
                            <div class="col-xs-12 col-sm-7 col-md-7">
                                <div class="pro-text-outer list-pro-text">
                                    <span>Macbook, Laptop</span>
                                    <a href="#">
                                        <h4> {{goods.Name}} </h4>
                                    </a>
                                    <div class="star2">
                                        <ul>
                                            <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><a href="#">10 review(s)</a></li>
                                            <li><a href="#"> 加入购物车</a></li>
                                        </ul>
                                    </div>
                                    <div v-if="goods.currentPrice===null">
                                        <p class="wk-price">
                                            ${{goods.originalPrice}}.00
                                        </p>
                                    </div>
                                    <div v-else>
                                        <p  class="wk-price">
                                            ${{goods.currentPrice}}.00
                                        </p>
                                    </div>
                                    <p>{{goods.summary}}</p>
                                    <a type="button" @click="addShopCart(goods.id)"  class="add-btn2"><span class="icon icon-Heart"> 加入购物车</span></a>

                                    <!--<a href="#" class="add-btn">Add to cart</a>
                                    <a href="#" class="add-btn2"><span class="icon icon-Heart"></span></a>
                                    <a href="#" class="add-btn2"><span class="icon icon-Restart"></span></a>-->
                                </div>
                            </div>
                        </div>
                        <!-- /.pro-text -->
                    </div>
                    <!--<div class="col-xs-12 col-sm-12 col-md-12">
                        &lt;!&ndash; .pro-text &ndash;&gt;
                        <div class="pro-text">
                            <div class="col-xs-12 col-sm-5 col-md-5">
                                &lt;!&ndash; .pro-img &ndash;&gt;
                                <div class="pro-img"><img src="assets/images/products/digital/14.jpg" alt="2">
                                    &lt;!&ndash; .hover-icon &ndash;&gt;
                                    <div class="hover-icon"><a href="#"><span class="icon icon-Heart"></span></a> <a
                                            href="#"><span class="icon icon-Search"></span></a> <a href="#"><span
                                            class="icon icon-Restart"></span></a></div>
                                    &lt;!&ndash; /.hover-icon &ndash;&gt;
                                </div>
                                &lt;!&ndash; /.pro-img &ndash;&gt;
                            </div>
                            <div class="col-xs-12 col-sm-7 col-md-7">
                                <div class="pro-text-outer list-pro-text">
                                    <span>Macbook, Laptop</span>
                                    <a href="#">
                                        <h4> Apple Macbook Retina 23’ </h4>
                                    </a>
                                    <div class="star2">
                                        <ul>
                                            <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li class="yellow-color"><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><a href="#">10 review(s)</a></li>
                                            <li><a href="#"> Add your review</a></li>
                                        </ul>
                                    </div>
                                    <p class="wk-price">$290.00 </p>
                                    <p>Typi non habent claritatem insitam, est usus legentis in iis qui facit eorum
                                        claritatem. Investigationes demonstraverunt lectores legere me lius quod ii
                                        legunt
                                        saepius. Claritas est etiam processus.</p>
                                    <a href="#" class="add-btn">Add to cart</a>
                                    <a href="#" class="add-btn2"><span class="icon icon-Heart"></span></a>
                                    <a href="#" class="add-btn2"><span class="icon icon-Restart"></span></a>
                                </div>
                            </div>
                        </div>
                        &lt;!&ndash; /.pro-text &ndash;&gt;
                    </div>-->
                    <div class="col-xs-12">
                        <div class="grid-spr pag">
                            <!-- .pagetions -->
                            <div class="col-xs-8 col-sm-8 col-md-8 text-left">
                                <ul class="pagination">
                                    <li style="float: left">
                                        <button class="btn btn-danger" @click="pageForward(pageIndex)">
                                            &lt;上一页
                                        </button>
                                    </li>
                                    <li style="float: left">
                                        <div class="input-group mb-3">
                                            <div class="input-group-append" style="float: left">
                                                <input style="float: left" id="pageTransfer" type="number"
                                                       class="form-control" placeholder=""
                                                       aria-label="Recipient's username"
                                                       aria-describedby="button-addon2">
                                            </div>
                                            <div style="float: left;">
                                                <button class="btn btn-outline-secondary"
                                                        type="button" id="button-addon2" @click="pageTransfer">
                                                    跳转
                                                </button>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="active" v-for="item in count">
                                        <button class="btn btn-danger" style="margin-right: 5px"
                                                @click="searchPageShow(item)">
                                            {{item}}
                                        </button>
                                    </li>

                                    <li>
                                        <button class="btn btn-danger" @click="pageNext(pageIndex)">
                                            下一页&gt;
                                        </button>
                                    </li>

                                    <!--<li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">&raquo;</a></li>-->
                                </ul>
                            </div>
                            <!-- /.pagetions -->
                            <!-- .Showing -->
                            <div class="col-xs-12 col-sm-6 col-md-6 text-right">
                                <strong>Showing 1-12 <span>of 30 relults</span></strong>
                            </div>
                            <!-- /.Showing -->
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- /.grid-shop -->
</section>
<!-- newsletter -->
<!-- 导入页脚 -->
<div class="footer"></div>
<!-- sticky-socia -->
<aside id="sticky-social">
    <ul>
        <li><a href="#" class="fa fa-facebook" target="_blank"><span><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</span></a>
        </li>
        <li><a href="#" class="fa fa-twitter" target="_blank"><span><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</span></a>
        </li>
        <li><a href="#" class="fa fa-rss" target="_blank"><span><i class="fa fa-rss" aria-hidden="true"></i> RSS</span></a>
        </li>
        <li><a href="#" class="fa fa-pinterest-p" target="_blank"><span><i class="fa fa-pinterest-p"
                                                                           aria-hidden="true"></i> Pinterest</span></a>
        </li>
        <li><a href="#" class="fa fa-share-alt" target="_blank"><span><i class="fa fa-share-alt" aria-hidden="true"></i> Flickr</span></a>
        </li>
    </ul>
</aside>
<!-- /sticky-socia -->
<p id="back-top"><a href="#top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a></p>
<script src="assets/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-dropdownhover.min.js"></script>
<!-- Plugin JavaScript -->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<!-- owl carousel -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
<!--  Custom Theme JavaScript  -->
<script src="assets/js/filter-price.js"></script>
<script src="assets/js/custom.js"></script>
<!--导入工具包-->
<script src="assets/js/util/http-util.js"></script>
<!--导入vue 包-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>

</html>
<script type="text/javascript">
    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });

    var pageIndex;
    var searchKey;
    var vm = new Vue({
        el: "#page",
        data: {
            GoodsList: [],
            count: 0,
            pageIndex: 1,
        },
        methods: {
            searchPageShow: function (pageIndex) {
                let thisObj = this;
                let url = "searchPageShow";
                searchKey = this.getUrlParam("GoodsList");
                console.log(searchKey);
                let params = {pageIndex: pageIndex, searchKey: searchKey};
                doPost(url, params, function (resp) {
                    thisObj.GoodsList = resp;
                    console.log(thisObj.GoodsList);
                })
            },
            pageCount: function () {
                let url = "searchPageCount";
                let thisObj = this;
                searchKey = this.getUrlParam("GoodsList");
                let params = {searchKey: searchKey};
                doPost(url, params, function (resp) {
                    thisObj.count = resp;
                    console.log(thisObj.count);
                })
            },
            pageNext: function (pageIndex) {
                let url = "searchPageShow";
                let thisObj = this;
                console.log(searchKey);
                if (this.pageIndex == this.count) {
                    alert("已经是最后一页哦！")
                } else {
                    this.pageIndex = this.pageIndex + 1;
                    console.log(this.pageIndex);
                    let params = {pageIndex: this.pageIndex, searchKey: searchKey};
                    doPost(url, params, function (resp) {
                        thisObj.GoodsList = resp;
                        console.log(thisObj.GoodsList);
                    })
                }

            },
            pageForward: function (pageIndex) {
                let url = "searchPageShow";
                let thisObj = this;
                if (this.pageIndex == 1) {
                    alert("这是第一页哦！")
                } else {
                    this.pageIndex = this.pageIndex - 1;
                    console.log(this.pageIndex);
                    let params = {pageIndex: this.pageIndex, searchKey: searchKey};
                    doPost(url, params, function (resp) {
                        thisObj.GoodsList = resp;
                        console.log(thisObj.GoodsList);
                    })
                }
            },
            pageTransfer: function () {
                var value = $("#pageTransfer").val();
                console.log(value);
                let url = "searchPageShow";
                this.pageIndex = value;
                let params = {pageIndex: value, searchKey: searchKey};
                let thisObj = this;
                doPost(url, params, function (resp) {
                    thisObj.GoodsList = resp;
                    console.log(thisObj.GoodsList);
                })
            },
            getUrlParam: function (searchKey) {
                var reg = new RegExp("(^|&)" + searchKey + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return decodeURI(r[2]);
                return null; //返回参数值
            },
            addShopCart: function (id) {
                console.log("获取商品ID" + id);
                let url = "addGoods";
                let params = {goodsNum: 1, goodsId: id};
                doPost(url, params, function (resp) {
                    alert(resp);
                })
            },
        },
        mounted: function () {
            this.searchPageShow();
            this.pageCount();
        }
    })
</script>